<template>
  <div class="wx-open-launch-weapp-block">
    <div class="slot-wrap">
      <slot></slot>
    </div>
    <div v-if="isSupport" class="open-tag-wrap">
      <wx-open-launch-weapp
        class="launch-btn"
        :appid="appId"
        :username="username"
        :path="`${path}?${pathQuety}`"
        @error="handleErrorFn"
        @launch="handleLaunch"
      >
        <script type="text/wxtag-template">
          <!-- 这里是为了撑开元素，让其可以被点击，不添加template会报错，添加了template不添加内容也会报错 -->
          <div style="padding: 10000px">
          </div>
        </script>
      </wx-open-launch-weapp>
    </div>
    <div v-else class="open-tag-wrap" @click="clickGoWxApp"></div>
  </div>
</template>

<script>
import { utilJs } from "@/utils/common.js";
export default {
    name: 'wxOpenWeapp',
    props: {
      appId:{
        type:String,
        default:'wx479af68a898a8c27',
      },
      username:{
        type:String,
        default:'gh_26a17da545ee',
      },
      path:{
        type:String,
        default:'pages/index/index'
      },
      pathQuety:{
        type:String,
        default:'',
      }
    },
    data() {
      return {
        isSupport: false,
      }
    },
    created() {
      this.isSupport = localStorage.getItem('isWxApp') != 1;
    },
    methods:{
      clickGoWxApp() {
        let fullPath = `${this.path}?${this.pathQuety}`;
        let query = `?appId=${this.appId}&path=${encodeURIComponent(JSON.stringify(fullPath))}`;
        utilJs.miniProgramGoTo('push', '/pages/home/goWxApp/index' + query);
      },
      handleLaunch(e) {
        console.log('handleLaunch---', e)
        this.$emit('handleLaunch')
      },
      handleErrorFn(e) {
        this.$showCjToast({
          text: e.errMsg || '无法打开小程序，请升级微信版本',
          type: "warn",
          time: 1500
        })
      },
    }
  }
</script>

<style scoped lang="less">
  .wx-open-launch-weapp-block {
    display: block;
    height: 100%;
    width: 100%;
    position: relative;
    .slot-wrap {
      width: 100%;
      height: 100%;
      text-align: center;
      position: relative;
      overflow: hidden;
      z-index: 1;
    }
    .open-tag-wrap {
      position: absolute;
      z-index: 10;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background-color: transparent;
    }
    .launch-btn {
      width: 100%;
      height: 100%;
      display: block;
      overflow: hidden;
    }
  }
</style>